<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>权限管理</title>
    <link rel="stylesheet" type="text/css" href="/static/h+/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h+/css/font-awesome.min93e3.css?v=4.4.0"/>
    <!-- Data Tables -->
    <link rel="stylesheet" type="text/css" href="/static/h+/css/plugins/iCheck/custom.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h+/css/plugins/dataTables/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h+/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h+/css/style.min.css?v=4.1.0"/>
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css"/>
    <style type="text/css">
        .form-control{width: 200px;}
        .ibox-title{position: fixed;width: 100%;background: rgba(200, 200, 200, 0.3);}
        .jg{width: 100%;height: 95px;}
        .idt_td{text-indent: 30px;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <input type="button" class="btn btn-sm btn-primary" value="保存修改" id="save">
          <select id="roles" class="form-control">
            <option value="">…请选择角色…</option>
            {foreach $roles as $role}
            <option value="{$role.id}"{if($role.id == $role_id)} selected="selected"{/if}>{$role.role_name}</option>
            {/foreach}
          </select>
        </div>
        <div class="jg"></div>
        <div class="ibox-content">
          <table class="table table-striped table-bordered table-hover dataTables-example">
            <thead>
            <tr>
              <th width="300px">标识</th>
              <th>名称</th>
              <th>排序</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {foreach $list as $key=>$item}
            <tr class="gradeX">
              <td>{$item.identity}</td>
              <td>{$item.title}</td>
              <td>{$item.sort}</td>
              <td><input type="checkbox" id="menu{$item.id}" class="menu_id" value="{$item.id}" {if(in_array($item.id, $has))} checked="checked"{/if}><label for="menu{$item.id}">拥有</label></td>
            </tr>
            {if(!empty($item.children))}
            {foreach $item.children as $item2}
            <tr class="gradeX">
              <td class="idt_td">{$item2.identity}</td>
              <td class="idt_td">{$item2.title}</td>
              <td>{$item2.sort}</td>
              <td><input type="checkbox" id="menu{$item2.id}" class="menu_id" value="{$item2.id}" data-pid="{$item2.pid}" {if(in_array($item2.id, $has))} checked="checked"{/if}><label for="menu{$item2.id}">拥有</label></td>
            </tr>
            {/foreach}
            {/if}
            {/foreach}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="/static/h+/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>
<script type="text/javascript">
    $(function(){
        $('.gradeX').each(function(){
            $(this).children('td:eq(3)').siblings().click(function(){
                var chk = $(this).parent('tr').find('.menu_id');
                chk.click()
            })
        });
        $('#roles').change(function(){
            if ($(this).val() != 0) {
                location.href = '{:url("power")}?role_id=' + $(this).val();
            }
        });
        $('.menu_id').click(function(){
            if ($(this).is(':checked')) {
                var $pid = $(this).data('pid');
                $('.menu_id').each(function(){
                    if ($(this).val() == $pid) {
                        $(this).prop('checked', true);
                    }
                });
            }else{
                // var $id = $(this).val();
                // $('.menu_id').each(function(){
                //     if ($(this).data('pid') == $id) {
                //         $(this).prop('checked', false);
                //     }
                // });
            }
        });
        $('#save').click(function(){
            if ($('#roles').val() == '') {
                layer.msg('请选择角色', {icon: 5, time: 2000});
                return false
            }
            $role_id = $('#roles').val();
            $menu_ids = [];
            $('.menu_id').each(function(){
                if ($(this).is(':checked')) {
                    $menu_ids.push($(this).val());
                }
            });
            $.ajax({
                type: 'post', cache: false, dataType: 'json',
                url: '{:url("power")}',
                data: {'role_id': $role_id, 'menu_ids': $menu_ids},
                success: function(data){
                    if (data.status == 0) {
                        layer.msg(data.info, {icon: 6, time: 1000});
                    }else{
                        layer.msg(data.info, {icon: 5, time: 1000});
                    }
                }
            });
        });
    });
</script>
</html>